<script setup>
import { ref, useTemplateRef, onMounted } from 'vue';
import { loadCore } from '@/federation';

const {
    Layout: WxyLayout,
    Table: WxyTable,
    TableColumn: WxyTableColumn,
    Page: WxyPage,
    Link: WxyLink,
    Form: WxyForm,
    FormInline: WxyFormInline,
    FormItem: WxyFormItem,
    showModal,
    routeTo
} = loadCore();

const page = useTemplateRef('page');
const filter = ref({
    name: '',
    page: 1,
    size: 32
});

const data = ref([
    { id: 1, name: 't1', age: 1, type: 1, status: 1 },
    { id: 2, name: 't2', age: 2, type: 2, status: 2 },
    { id: 3, name: 't3', age: 3, type: 3, status: 3 },
    { id: 4, name: 't4', age: 4, type: 4, status: 4 },
    { id: 5, name: 't5', age: 5, type: 5, status: 5 },
]);

const summaryData = ref({
    count: 126,
    total: 395,
    sum: 127,
    avg: 49
});

const tableColumns = [
    { title: '值班教师', field: 'dutyTeacherName~EF' },
    { title: '手机号', field: 'tel~EF' },
    { title: '值班日期', field: 'dutyDate~EF' },
    { title: '校区', field: 'opName~EF' },
    { title: '年级班级', field: 'className~EF' },
    { title: '值班类型', field: 'type~EF' },
    { title: '值勤教师', field: 'inspectTeacherName~EF' },
    { title: '值勤时间', field: 'inspectTime~EF', width: '160px' },
    { title: '相关说明', field: 'contentShort~EF' },
    { title: '操作', type : 'link_group', group: [
        { title: '查看', onclick: 'detail' }
    ], width: '120px' }
];

const loadData = () => {
    
}

const onChangePage = (current, size) => {
    loadData();
}

onMounted(() => {
    page.value.setPage(filter.value.page, filter.value.size, 320);

    setTimeout(() => {
        data.value[0].name = 'asd';
        summaryData.value.count = 100;
    }, 2000)
});

const onClick = (row) => {
    routeTo('page2.detail', {
        id: row.id
    });
};

const onRemove = (row) => {
    showModal({
        content: '123',
        type: 'prompt',
    });
};
</script>

<template>
    <WxyLayout>
        <WxyForm :data="filter">
            <WxyFormInline>
                <WxyFormItem prop="name" placeholder="请输入姓名" />
            </WxyFormInline>
        </WxyForm>

        <!-- 加载中（loading） 排序（sort-in-api） -->
        <WxyTable :data="data" :summary-data="summaryData" loading height="300px" sort-in-api>
            <!-- 选择框 -->
            <WxyTableColumn type="selection" width="80px" />

            <!-- 显示文本 prop，可传函数自定义文本内容（仅限文本，其他格式使用插槽完成） -->
            <WxyTableColumn prop="name" label="字段名1" summary="-" />

            <!-- 排序 sortable（默认顺序，可选值 asc desc，可传函数自定义排序方式） -->
             <!-- 如果表格设定了 sort-in-api，sortable 不支持函数，排序规则由接口处理 -->
            <WxyTableColumn prop="type" sortable="desc" summary="count" label="字段名2" />

            <!-- 标题过滤按钮 filters（可传数组或函数，函数支持异步加载） -->
            <WxyTableColumn prop="fieldName" :filters="[{text: '选项1', value: '选项1'}, {text: '选项2', value: '选项2'}]" label="字段名3" />

            <!-- footer统计行 summary （可传字段名或函数，函数支持异步加载） -->
            <WxyTableColumn prop="fieldName" summary="total" label="字段名4" />

            <!-- 多级表头 prop-group -->
            <WxyTableColumn prop-group label="字段名5">
                <WxyTableColumn prop="fieldName1" label="字段5-1" />
                <WxyTableColumn prop="fieldName2" label="字段5-2" />
            </WxyTableColumn>

            <!-- 文字靠右&自定义title和内容 （最后一项常用） -->
            <WxyTableColumn width="120px">
                <template #header>
                    <span>操作</span>
                </template>

                <template #default="{ row }">
                    <WxyLink @click="onClick(row)">编辑</WxyLink>
                    <WxyLink status="danger" @click="onRemove(row)">删除</WxyLink>
                </template>
            </WxyTableColumn>
        </WxyTable>

        <WxyPage ref="page" @change="onChangePage">3</WxyPage>
    </WxyLayout>
</template>